<!-- 商户申请审核 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="乔迁之喜" prop="mobile">
          <el-select
            v-model="queryParams.endStatusList"
            placeholder="请选择状态"
            clearable
            multiple
            class="!w-[240px]"
          >
            <el-option
              v-for="dict in statusList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="initList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <base-page-table
      :table-data="tableData"
      :table-columns-data="tableColumnsData"
      :loading="loading"
      :page-num="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :total="queryParams.total"
      @handleQuery="handleQuery"
    >
      <template #endStatus="scope">
        <el-tag :type="statusObject[scope.row.endStatus].type">
          {{ statusObject[scope.row.endStatus].label }}
        </el-tag>
      </template>
      <template #userType="scope">
        <el-tag type="primary" class="margin-r-10">
          {{ SETTLE_TYPE_OBJECT[scope.row.userType] }}
        </el-tag>
      </template>
      <template #action="scope">
        <template>
          <!-- <el-button
            link
            type="danger"
            :disabled="statusEnum['已申请']"
            @click="handleAuditError(scope.row)"
          >
            驳回
          </el-button> -->
        </template>
        <el-button
          link
          type="primary"
          :disabled="
            scope.row.endStatus === statusEnum['未申请'] ||
            scope.row.endStatus === statusEnum['已同意'] ||
            scope.row.endStatus === statusEnum['已拒绝']
          "
          @click="openAudit(scope.row)"
        >
          审核
        </el-button>
        <el-button link type="primary" @click="handleDetail(scope.row)">查看</el-button>
      </template>
    </base-page-table>
  </div>
  <Detail v-model:visible="detailVisible" :row="activeRow" :type="company" />
  <AuditDiaglog v-model:visible="auditVisible" :row="activeRow" @updateList="initList" />
</template>
<script setup>
import Detail from "./Detail.vue";
import AuditDiaglog from "./AuditDiaglog.vue";
import { auditHouse } from "@/api/apply/audit";
import { getHouseAuditList } from "@/api/apply/audit";
import { MERCHANT_APPLY_AUDIT_STATUS_WORD } from "@/utils/enums/merchant";
import { SETTLE_TYPE_OBJECT } from "@/utils/enums/system";
const statusEnum = ref({
  未申请: 0,
  已申请: 1,
  已同意: 2,
  已拒绝: 3,
});
const statusList = ref([
  {
    label: "未申请",
    value: statusEnum.value["未申请"],
    type: "warning",
  },
  {
    label: "已申请",
    value: statusEnum.value["已申请"],
    type: "primary",
  },
  {
    label: "已同意",
    value: statusEnum.value["已同意"],
    type: "success",
  },
  {
    label: "已拒绝",
    value: statusEnum.value["已拒绝"],
    type: "danger",
  },
]);
// 状态对象
const statusObject = ref({});
statusList.value.forEach((item) => {
  statusObject.value[item.value] = item;
});
const queryParams = reactive({
  endStatusList: [1, 2, 3],
  pageNum: 1,
  pageSize: 10,
});
// HOUSE_DECORATION_STEP_ENUM 中 0 和 1 表示认证阶段, 所以需要单独处理
const hasAuditArray = ref(["0", "1"]);
const queryFormRef = ref();
const tableData = ref([]);
const tableColumnsData = ref([
  {
    label: "户主名称",
    prop: "ownName",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "手机号码",
    prop: "mobile",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "小区名称",
    prop: "neighborhood",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "门牌号",
    prop: "houseNumber",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "分佣百分比(%)",
    prop: "auditPercent",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "状态",
    prop: "endStatus",
    align: "center",
    showOverflowTooltip: true,
    customSlot: "endStatus",
  },
  {
    label: "操作",
    prop: "action",
    align: "center",
    customSlot: "action",
    showOverflowTooltip: true,
  },
]);
const handleAudit = (row, status, auditDesc = "") => {
  funcAuditHouse({
    id: row.id,
    status: status,
    auditDesc: auditDesc,
  });
};
const auditVisible = ref(false);
const openAudit = (row) => {
  auditVisible.value = true;
  activeRow.value = row;
};
/**
 * 详情展示
 */
const detailVisible = ref(false);
const activeRow = ref({});
const handleDetail = (row) => {
  detailVisible.value = true;
  activeRow.value = row;
};
/**
 * 驳回弹窗
 */
const auditErrorVisible = ref(false);
const handleAuditError = (row) => {
  auditErrorVisible.value = true;
  activeRow.value = row;
};
/**
 * 请求相关
 *
 */
//获取申请列表
const loading = ref(false);
const funcGetHouseAuditList = async () => {
  try {
    loading.value = true;
    const res = await getHouseAuditList({
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      mobile: queryParams.mobile,
      neighborhood: queryParams.neighborhood,
      ownName: queryParams.ownName,
      endStatusList: queryParams.endStatusList,
    });
    tableData.value = res.list;
    queryParams.total = res.total;
    // 刷新列表
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};
//审核房屋
const funcAuditHouse = async (params) => {
  try {
    const res = await auditHouse(params);
    funcGetHouseAuditList();
    // 刷新列表
    console.log(res);
  } catch (err) {
    console.log(err);
  } finally {
  }
};
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.value.endStatusList = [1, 2, 3];
  initList();
}
function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  funcGetHouseAuditList();
}
function initList() {
  queryParams.pageNum = 1;
  funcGetHouseAuditList();
}
onMounted(() => {
  funcGetHouseAuditList();
});
</script>
<style lang="scss" scoped></style>
